Alteryx謹製の動的ダッシュボード作成ツールFlightDeckを使ってみる(基本的な仕組み編)

これはもはやAlteryxの記事ではなくRの記事なんじゃないだろうか...?

「カスタマーストーリー」を支えるツール特集

#ビジネス・アナリティクス

#Alteryx

じょんすみす

2019.03.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、小澤です。

AlteryxでPredictive系のツールなどを使っていると、出力に動的なレポートが含まれるものがあります。

この仕組みは、Rのhtmlwidgetを使って実現しています。

AlteryxでRツールから動的なグラフを出力する｜ DevelopersIO

とはいえ、このUIを全部作るのはなかなか大変そうです。

そんなこのUIをよきに計らってくれるのが今回紹介するFlightDeckというパッケージとなっています。 FlightDeckはAlteryx外のRからも直接使えるパッケージとなっています。

FlightDeckを使ってみる

FlightDeckはAlteryxのGithubで公開されています。

早速どのように使うのかを見ていきましょう。

インストール

まずはインストールと行きたいところですが、FlightDeckはCRANに登録されていないのでGithubから入れる必要があります。以下のどちらかの方法でインストールが可能です。

# リポジトリを指定してインストール
install.packages("flightdeck",
  repos = c(getOption('repos'), alteryx = 'https://alteryx.github.io/drat')
)

# あるいはdevtoolsを使う
devtools::install_github('alteryx/flightdeck')

なお、AlteryxのPredictiveツールに含まれるRを利用する場合はインストールの必要はありません。

動かしてみる

FlightDeckで生成される内容は以下の3つに分かれます。

Header : 上部のタイトルが表示される部分
Sidebar : 左側のメニュー
Body : 右側の本体部分

Headerには、タイトルの表示とメニューの表示/非表示の切り替えを行うボタンが表示されます。

Sidebarはメニューになっており、Bodyに表示する内容を複数ページに分けて切り替えることが可能になっています。

Body部分には表示するパーツを配置していき画面の構成を作成していきます。

では、まず基本的なパーツであるInfoBoxを作成してみましょう。InfoBoxはテキストや数値などを表示するためのパーツです。

library(flightdeck)

# InfoBoxの作成
# 1行目に表示するテキスト、2行目に表示するテキスト、3行目に表示するテキストの順で指定可能
# colorで左側の色、iconで左側に表示するアイコンを指定する
infobox1 <- fdInfoBox('何らかの指標', '80.7%', color = 'blue', icon = fdIcon('chart-line', lib = 'entypo'))

# 作成したパーツ単体の結果を確認する場合はfdPreview関数に渡す
infobox1 %>% fdPreview()

結果は以下のようになります。

このようなfdXX系の関数でパーツを作成していきBody部分を組み立てていきます。

複数のパーツを横に並べるには、fdRow関数を使います。

row1 <- fdRow(
  fdInfoBox("マッカラン", "40%", "スコッチ", color = 'green', icon = fdIcon("check")),
  fdInfoBox("ラフロイグ", "40%", "スコッチ", color = 'green', icon = fdIcon("check"))
)
row1 %>% fdPreview()

これで以下のような表示となります(※ 横幅が狭い場合項目が縦に並ぶ場合があります)。

このように1行に表示するものをfdRowで表現し、それを複数組み合わせることでBodyの1ページ分に表示させる内容を定義します。

1ページに含む情報を表現するにはfdPage関数の引数にfdRowを渡してやります。

row2 <- fdRow(
  fdInfoBox("白州", "43%", "ジャパニーズ", color = 'blue', icon = fdIcon("check")),
  fdInfoBox("ジムビーム", "40%", "バーボン", color = 'blue', icon = fdIcon("check"))
)

# fdPageにfdRowを渡す
# FlightDeckでは複数ページを切り替えて表示できるので、
# id引数でこのページを表す一意な値を与えるとともに初期状態で表示するかをdisplay引数に渡す
page1 <- fdPage(row1, row2, id = 'page1', display=TRUE)

page1 %>% fdPreview()

結果は以下のようになります。

さて、ではこの内容をBodyとして全体を組み立ててみましょう。

# dfSidebarMenuでSidebar部分に表示するリストを定義する
# 表示項目名、項目の左側に表示されるアイコン、クリックしたときに表示するページのidの3つ指定する
sidebar <- fdSidebarMenu(
  fdMenuItem('Page1', icon = fdIcon('th'), pageName = 'page1')
)

# Header, Sidebar, Bodyをそれぞれ指定して全体を組み立てる
fdBoard(
  fdHeader(title = "FlightDeckだよ"),
  fdSidebar(sidebar),
  fdBody(page1)
)

結果は以下のようになります。

なお、ここまでの画像はすべてRStudioのViewerをキャプチャしたものとなっていますが、動的なレポートとしてこのままRMarkdownやShinyなどで利用することも可能です。

複数ページ作るには？

さて、Sidebarによる画面切り替えでBodyは複数ページを持つことが可能です。その方法を見てみましょう。

先ほどのスクリプトを以下のように書き換えてみます。

row1 <- fdRow(
  fdInfoBox("マッカラン", "40%", "スコッチ", color = 'green', icon = fdIcon("check")),
  fdInfoBox("ラフロイグ", "40%", "スコッチ", color = 'green', icon = fdIcon("check"))
)
row2 <- fdRow(
  fdInfoBox("白州", "43%", "ジャパニーズ", color = 'blue', icon = fdIcon("check")),
  fdInfoBox("ジムビーム", "40%", "バーボン", color = 'blue', icon = fdIcon("check"))
)

# row1はpage1に配置
page1 <- fdPage(row1, id = 'page1', display=TRUE)
# row2はpage2に配置
# page2は切り替えた際に初めて表示させるのでdisplayはFALSE
page2 <- fdPage(row2, id = 'page2', display=FALSE)

# Sidebarの引数にもpage1, page2両方を渡す
sidebar <- fdSidebarMenu(
  fdMenuItem('Page1', icon = fdIcon('th'), pageName = 'page1'),
  fdMenuItem('Page2', icon = fdIcon('th'), pageName = 'page2')
)

# Bodyの項目として複数のページを指定
fdBoard(
  fdHeader(title = "FlightDeckだよ"),
  fdSidebar(sidebar),
  fdBody(page1, page2)
)

結果は1ページ目、2ページ目でそれぞれ以下のようになります。